<template>
  <div>
    <div class="login">

      <h1>欢迎管理员登录</h1>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label-width="90px">
          <el-input v-model="form.name" placeholder="用户名:" class="input"></el-input>
        </el-form-item>
        <el-form-item label-width="90px">
          <el-input  placeholder="密码:" v-model="form.pwd" class="input" type="password"></el-input>
        </el-form-item>
      </el-form>
       <el-button type="primary" @click="login()" class="denglu">登录</el-button>
    </div>
    <video
      autoplay
      loop
      muted
      src="../assets/16301957552977dd5074e0e0a2.mp4_last.mp4"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pwd: "",
      },
    };
  },
  methods: {
    login() {
      let loginitem = `admin_user=${this.form.name}&admin_pwd=${this.form.pwd}`
      this.axios.post("/user/loginadmin",loginitem).then((res)=>{
        if(res.data.code===201){
          alert("请检查用户名以及密码");
        }else{
          sessionStorage.setItem('admin',res.data.data[0].admin_user)
          // localStorage.setItem('admin',res.data.data[0].admin_user)
          this.$router.push("/icon")
          console.log(res.data.data[0]);
        }


        
        
})
    }
  },
};
</script>

<style  scoped>
.input{
  width: 300px;
}
.denglu{
  width: 200px;
  margin: 0 125px;
  margin-top:40px ;
}
.login {
  width: 450px;
  height: 400px;
  background-color:rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  color: #fff;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login h1{
  font-size: 30px;
  margin: 50px 120px;
  margin-bottom: 50px;
}
video {
  position: fixed;
  right: 0px;
  bottom: 0px;
  max-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -99;
}
</style>